{# What one meeting came to, drawn the same on the Meetings page and in
   Overseer's drawer. ``clock`` maps a transcript line's id to its time. #}
{% from "components/macros/feedback.html" import empty_state %}
{% import "components/macros/layout.html" as layout %}
{% from "components/macros/layout.html" import badge, chart_dot %}

{# Where the bot is with the call, and how long it was in. #}
{% macro status_line(status, length) %}
<span data-status>{{ badge(status.label, status.tone) }}</span>
{% if length %}<span class="text-xs tabular-nums text-aegis-muted">{{ length }}</span>{% endif %}
{% endmacro %}

{% macro failure(meeting) %}
{% if meeting.failure_reason %}<p role="alert" class="text-sm text-error">{{ meeting.failure_reason }}</p>{% endif %}
{% endmacro %}

{# What the bot did on Meet's page (``models.bot``), a value for the
   meeting's ``facts`` (pass it only with steps): each control in turn,
   plain where it went as it should, marked in its tone where not (Meet's
   shortcut, or not found), then why it left. A step with what the page
   showed opens on it: the buttons Meet had, for what a renamed control is
   called now. #}
{% macro bot_steps(steps) -%}
<span data-bot-steps class="flex flex-wrap items-start gap-x-2 gap-y-1">
  {% for s in steps %}
  {% if not loop.first %}<span aria-hidden="true" class="text-aegis-muted">·</span>{% endif %}
  {% set said = s.said if s.tone == "ok" else badge(s.said, s.tone) %}
  {% if s.seen %}
  <details>
    <summary class="cursor-pointer">{{ said }}</summary>
    <p class="mt-1 max-w-prose whitespace-pre-line text-aegis-muted">{{ s.seen }}</p>
  </details>
  {% else %}<span>{{ said }}</span>{% endif %}
  {% endfor %}
</span>
{%- endmacro %}

{# The notes, or why there are none: the summary, then what the caller
   puts first (the Meetings page puts my items there), then the lists. A
   rewrite that failed keeps the notes it had, and says so above them. #}
{% macro notes_view(notes, notes_error, clock, empty, voices) %}
{% if notes %}
{% if notes_error %}<p role="alert" class="text-sm text-error">Writing them again failed, so these are the last ones: {{ notes_error }}</p>{% endif %}
<p id="meeting-summary" class="text-sm text-aegis-text">{{ notes.summary }}</p>
{% if caller is defined %}{{ caller() }}{% endif %}
{{ notes_lists(notes, clock, voices) }}
{% elif notes_error %}
<p role="alert" class="text-sm text-error">The notes could not be written: {{ notes_error }}</p>
{% else %}
<p class="text-sm text-aegis-muted">{{ empty }}</p>
{% endif %}
{% endmacro %}

{# A speaker as the theme marks a source (the logs page's dot): their name
   in text, after a small dot in their color in this meeting (``voices``). #}
{% macro speaker(name, voices, attr="data-speaker") -%}
<span {{ attr }} class="font-semibold text-aegis-text">{{ chart_dot(voices.get(name, 1)) }}{{ name }}</span>
{%- endmacro %}

{% macro items(list, empty, clock, voices=None) %}
{% if list %}
<ul class="space-y-3 text-sm">
  {% for item in list %}
  <li class="flex items-baseline gap-3">
    <span class="flex-1 min-w-0 leading-relaxed">
      {%- if voices and item.owner %}{{ speaker(item.owner, voices, "data-owner") }} <span class="text-aegis-muted">·</span> {% endif -%}
      {{ item.text }}
      {%- if item.due %} <span class="whitespace-nowrap rounded bg-aegis-bg px-1.5 py-0.5 text-xs text-aegis-muted">{{ item.due }}</span>{% endif %}
    </span>
    {% if item.lines %}<a href="#line-{{ item.lines[0] }}" class="shrink-0 text-xs tabular-nums text-aegis-muted hover:text-aegis-teal">{{ clock.get(item.lines[0], "Said") }}</a>{% endif %}
  </li>
  {% endfor %}
</ul>
{% else %}
<p class="text-xs text-aegis-muted">{{ empty }}</p>
{% endif %}
{% endmacro %}

{% macro heading(label) %}<h3 class="text-xs font-semibold caps text-aegis-muted">{{ label }}</h3>{% endmacro %}

{# Everyone's action items, the decisions and the open questions. #}
{% macro notes_lists(notes, clock, voices) %}
<section id="all-items" class="grid gap-2">
  {{ heading("Everyone's") }}
  {{ items(notes.action_items, "No action items.", clock, voices) }}
</section>
<section id="decisions" class="grid gap-2">
  {{ heading("Decisions") }}
  {{ items(notes.decisions, "No decisions.", clock) }}
</section>
<section id="open-questions" class="grid gap-2">
  {{ heading("Open questions") }}
  {{ items(notes.open_questions, "None left open.", clock) }}
</section>
{% endmacro %}

{# Who said what: one speaker's lines in a row under their name, each line
   with its time and its own anchor (an item jumps to it); ``hit``, the
   line a search opened it at, marked. #}
{# ``base`` and ``asks``: each line can be asked what it is about (where the
   stack has Illiana), her answer opening under it in a slot the body's live
   re-read keeps (``hx-preserve``). The slot holds the ask too: one at a time
   (``hx-sync``), and saying she is on it (``hx-indicator``), however often
   the body is drawn again meanwhile. ``parts``: the parts of the system a
   line names (``parts_named``), each offered as what it is. #}
{% macro transcript(turns, clock, voices, hit=None, base=None, asks=False, parts={}) %}
{% if turns %}
<ol class="space-y-4 text-sm"{% if asks %} hx-target="next .about-slot" hx-indicator="next .about-slot" hx-sync="next .about-slot:drop"{% endif %}>
  {% for name, rows in turns %}
  <li data-turn class="grid scroll-mt-12 gap-1">
    {{ speaker(name, voices) }}
    {% for line in rows %}
    <p id="line-{{ line.id }}" data-copy-line="{{ name }} [{{ clock[line.id] }}]" {% if hit and line.id == hit %}data-hit{% endif %} class="group/line flex gap-3 scroll-mt-20 rounded px-2 -mx-2 target:bg-aegis-teal/10 data-[hit]:bg-aegis-teal/10">
      <span class="w-10 shrink-0 pt-0.5 text-xs tabular-nums text-aegis-muted">{{ clock[line.id] }}</span>
      <span data-said class="flex-1 leading-relaxed text-aegis-text">{{ line.text }}{% for part, name in parts.get(line.id, []) %} {{ ask_about(base, line.id, part, name) }}{% endfor %}</span>
      {% if asks %}{{ ask_about(base, line.id) }}{% endif %}
    </p>
    {% if asks %}<div id="about-line-{{ line.id }}" class="about-slot" hx-preserve></div>{% endif %}
    {% endfor %}
  </li>
  {% endfor %}
</ol>
{% else %}
{{ empty_state("Nothing said yet", "Lines appear here as the call's captions write them.") }}
{% endif %}
{% endmacro %}

{# One moment as its card shows it: who, when, and what was said. #}
{% macro said_line(moment, clock, voices) -%}
<div class="flex flex-wrap items-baseline gap-x-2 text-xs">
  {{ speaker(moment.speaker, voices) }}
  <span class="tabular-nums text-aegis-muted">{{ clock.get(moment.line_id, "") }}</span>
</div>
<p class="text-sm text-aegis-text">{{ moment.text }}</p>
{%- endmacro %}

{# What the call threw up of one kind (``moments``): each with who said it
   and when, a button per action it offers (a browser action copies its
   prompt; the others are asked, at ``base``), and every run asked of it,
   with where it stands and what it came back with. #}
{% macro moments(list, clock, voices, base, hx_body) %}
{% from "components/macros/form.html" import action %}
{% from "components/macros/layout.html" import copy_button, fold_mark %}
{# A run's tone (``RunRecord.tone``) as its dot and its answer's edge. #}
{% set dots = {"ok": "bg-aegis-teal", "error": "bg-aegis-error", "muted": "bg-aegis-border"} %}
{% set edges = {"ok": "border-aegis-teal", "error": "border-aegis-error", "muted": "border-aegis-border"} %}
<ul class="grid gap-3">
  {% for moment in list %}
  {# Folded to what was asked, and how its answers stand, a dot each; open
     while one is going. ``data-fold`` keeps it as the reader left it
     across the page's re-reads (app.js). #}
  <li>
  <details data-moment="{{ moment.id }}" data-fold="moment:{{ moment.id }}"{% if moment.runs|selectattr("going")|list %} open{% endif %}
           class="rounded-lg border border-aegis-border">
    <summary class="list-none cursor-pointer select-none flex items-start gap-3 p-3">
      {{ fold_mark("mt-0.5") }}
      <span class="min-w-0 flex-1">
        <span {% if moment.topic %}data-topic {% endif %}class="line-clamp-2 text-sm text-aegis-text {{ 'font-semibold' if moment.topic }}">{{ moment.topic or moment.text }}</span>
        {% if moment.also %}<span class="text-xs text-aegis-muted">{{ moment.also|length + 1 }} asked</span>{% endif %}
      </span>
      {% for run in moment.runs %}
      <span data-run-dot="{{ run.status }}" title="{{ run.label }} · {{ run.state }}"
            class="mt-1.5 h-2 w-2 shrink-0 rounded-full {{ 'animate-pulse bg-aegis-teal' if run.going else dots[run.tone] }}"></span>
      {% endfor %}
    </summary>
    <div class="grid gap-2 px-3 pb-3">
    {{ said_line(moment, clock, voices) }}
    {# The rest of its card: said right after it, or on its topic. #}
    {% for more in moment.also %}
    <div data-also="{{ more.id }}" class="grid gap-1 border-l border-aegis-border pl-3">{{ said_line(more, clock, voices) }}</div>
    {% endfor %}
    {% if moment.actions %}
    <div class="flex flex-wrap gap-2">
      {% for choice in moment.actions %}
      {% if choice.where == "browser" %}{{ copy_button(choice.prompt, choice.label) }}
      {% else %}{{ action(choice.label, 'data-action="' ~ choice.name ~ '" data-write hx-disabled-elt="this" hx-post="' ~ base ~ '/moments/' ~ moment.id ~ '/runs" ' ~ hx_body ~ (' disabled' if choice.busy else ''), vals={"action": choice.name}) }}{% endif %}
      {% endfor %}
    </div>
    {% endif %}
    {% for run in moment.runs %}
    <div data-run="{{ run.status }}" class="grid gap-1 border-l-2 pl-3 {{ edges[run.tone] }}">
      <p class="text-xs text-aegis-muted">{% if run.going %}<span class="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-aegis-teal align-middle" aria-hidden="true"></span>{% endif %}{{ run.label }} · {{ run.state }}</p>
      {% if run.result and run.status == 'failed' %}<p class="text-sm text-error whitespace-pre-wrap" data-answer>{{ run.result }}</p>
      {% elif run.result %}<div class="{{ layout.prose }}" data-answer>{{ run.result|markdown }}</div>{% endif %}
    </div>
    {% endfor %}
    </div>
  </details>
  </li>
  {% endfor %}
</ul>
{% endmacro %}


{# Asking Illiana what a line is about (``.ask-about``): shown on the line's
   hover (or focus), her answer drawn into the slot after it (``transcript``).
   Kept small: a live call draws every line again every few seconds. Given a
   ``part`` the line names (heard as ``name``), a chip asking what it is. #}
{% macro ask_about(base, line_id, part=None, name=None) -%}
{%- set url = base ~ "/lines/" ~ line_id ~ "/about" -%}
{%- if part -%}
{%- set hx %}hx-post="{{ url }}?part={{ part|urlencode }}"{% endset -%}
{%- set extra %}data-part="{{ part }}"{% endset -%}
{{ layout.chip(name ~ ": what it is", hx=hx, extra=extra) }}
{%- else -%}
<button type="button" class="ask-about" data-about="{{ line_id }}" hx-post="{{ url }}">What's this about?</button>
{%- endif -%}
{%- endmacro %}